<template>
    <view class="container">
        <view class="header">
            <image class="header-ico" src="@/static/images/ai_blue.png"></image>

            <view class="header-title">已检测当前工单，当前存在<text class="lt">不合规</text>风险图片。</view>
            <view class="header-subtitle">若对检测结果有异议，可在工单提交任务后，进行申诉。</view>
        </view>
        <view class="appeal-title">
            <view class="appeal-title-txt">
                AI不合规图片
            </view>
            <view class="appeal-title-total">
                已填申诉({{ appealNum }}/{{ total }})
            </view>
        </view>

        <view v-for="item in list" :key="item.type" class="section">
            <view class="section-title">{{ item.name }}</view>
            <view v-for="subItem in item.children" :key="subItem.name" class="sub-section">
                <view class="sub-title">{{ subItem.name }}</view>
                <view v-for="photo in subItem.children" :key="photo.url" class="photo-item">
                    <image class="photo" :src="photo.url" />
                    <view class="status">
                        <text :class="photo.desc ? 'tag compliant' : 'tag not-compliant'" v-if="photo.status <= 1">
                            {{ photo.desc ? '已申诉' : '未申诉' }}
                        </text>
                        <text v-else class="tag compliant">已审核</text>
                    </view>
                    <view class="appeal-btn" @click="toPreView(photo)">查看与申诉
                        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
                    </view>

                    <view :class="['ai-result', ['gre', 'org', 'red'][photo.result]]">
                        <image class="ai-result-ico" src="@/static/images/ai.svg"></image>
                        <text>
                            {{ ['合规', '疑似合规', '不合规'][photo.result] }}
                        </text>
                    </view>
                </view>
            </view>
        </view>

        <view class="submit-btn" v-if="finish == 1">
            <view class="submit-btn-item" @click="postPlan">
                继续提交任务
            </view>
        </view>
        <previewMedia ref="previewMedia" @closed="previewClosed"></previewMedia>
        <uni-popup ref="multiUserPopup" :mask-click="true" type="bottom">
            <view class="multiUser">
                <view class="multiUser_title" @click="$refs.multiUserPopup.close">
                    <view class="line"></view>
                    <view class="tips">提示</view>
                </view>
                <view style="height: 2rpx;background: #EEEEEE;"></view>
                <view class="multiUser_content">
                    <view class="content_tips">工单当前作业人数不足2人，暂无法提交</view>
                    <view class="content_remarks">因法规要求，年审梯保养作业必须2人以上</view>
                    <view class="content_remarks">计划执行人:</view>
                    <view class="people_box">
                        <view :class="['people', item.signUser.isTakePartIn ? 'signOnPeople' : '']"
                            v-for="(item, index) in planDetail.users" :key="index">
                            <view>{{ item.userName.slice(-2) }}</view>
                            <view :class="['tags', item.signUser.isTakePartIn ? 'signOn' : '']">{{
                                item.signUser.isTakePartIn ? '已签到' : '未签到' }}</view>
                        </view>
                    </view>
                </view>
                <view style="height: 2rpx;background: #EEEEEE;"></view>
                <view class="multiUser_bottom">
                    <view class="btn" @click="$refs.multiUserPopup.close">我知道了</view>
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="workTimePopup" :mask-click="true" type="bottom">
            <view class="multiUser">
                <view class="multiUser_title" @click="$refs.workTimePopup.close">
                    <view class="line"></view>
                    <view class="tips">提示</view>
                </view>
                <view style="height: 2rpx;background: #EEEEEE;"></view>
                <view class="multiUser_content" style="padding-bottom: 0;">
                    <view class="content_tips">工单作业时⻓不足，暂无法提交</view>
                    <view style="display: flex; justify-content: space-between; align-items: center;margin-top: 24rpx;">
                        <view>
                            <view style="color: #666;">当前已作业</view>
                            <view>{{ planDetail.workDuration }}分钟</view>
                        </view>
                        <view style="text-align: right;">
                            <view style="color: #666;">作业时长要求(以上)</view>
                            <view>{{ config.cheWorkTime }}分钟</view>
                        </view>
                    </view>
                </view>
                <view class="multiUser_content" style="padding-bottom: 68rpx;">
                    <view
                        style="width: 100%; height: 32rpx; background: #EBF7FF; border-radius: 8rpx; margin-top: 16rpx; overflow: hidden;">
                        <view :style="{
                            width: ((planDetail.workDuration / (config.cheWorkTime || 1)) * 100 > 100 ? 100 : (planDetail.workDuration / (config.cheWorkTime || 1)) * 100) + '%',
                            height: '100%',
                            background: '#0091ff',
                            borderRadius: '16rpx',
                            transition: 'width 0.3s'
                        }"></view>
                    </view>
                </view>
                <view style="height: 2rpx;background: #EEEEEE;"></view>
                <view class="multiUser_bottom">
                    <view class="btn" @click="$refs.workTimePopup.close">我知道了</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { getAIImages } from '@/apis/system.js';
import { finishPlan } from '@/apis/workOrder.js';
import { getlocalinfo } from '@/utils/utils.js';
import { getConfig } from '@/apis/sign.js';
import { getPlanDetail } from '@/apis/workOrder.js';
export default {
    data() {
        return {
            planId: '',
            list: [],
            // 0 1显示提交按钮
            finish: 0,

            // 总数
            total: 0,
            // 已申诉数量
            appealNum: 0,
            config: {},
            planDetail: {},
            maintainPlanContentExt: {},
        };
    },
    onLoad(opt) {
        this.finish = opt.finish || 0;
        if (opt.planId) {
            this.planId = opt.planId;
            this.getList();
        }
        getConfig().then((res) => {
            if (res) {
                this.config = res.data.config;
            }
        });
        getPlanDetail({ planId: this.planId }).then(res => {
            this.planDetail = res.data;
            this.maintainPlanContentExt = res.data.maintainPlanContentExt || {};
        })
    },

    methods: {
        // 预览关闭 刷新页面
        previewClosed() {
            this.getList();
        },
        // 提交任务函数
        async postPlan() {
            console.log('提交按钮');
            // 双人操作校验 过滤签到过人员
            if (this.config.cheMultiUser == 1 && this.config.cheMultiWork.indexOf(this.maintainPlanContentExt.auditType) != -1 && this.planDetail.users.filter(item => item.userSignCount > 0).length < 2 && this.planDetail.users.length != 1) {
                this.$refs.multiUserPopup.open();
                return;
            }
            
            // 工单作业时长
			// 工单id白名单 跳过工单作业时长校验
			let whiteIdList = ['1874375258374086657','1874375259531714561','1874375261360431106','1874375260450267138',
                '1874375263176564738','1874375262258012161','1874378694222094337','1874378690522718210','1874378695119675393',
                '1874378691449659393','1874378693328707586','1874378692410155010','1874379074502860802','1874379071109668866',
                '1874379067552899073','1874379072833527810','1874379066701455362','1874379069222232065','1874379071994667010',
                '1874379070136590338','1874379073668194306','1874379068387565569'
            ]
            if (!whiteIdList.includes(this.planId) && this.config.cheWorkTimeType == 1 && this.config.cheMultiWorkTime.indexOf(this.maintainPlanContentExt.auditType) != -1 && this.planDetail.workDuration < this.config.cheWorkTime) {
                this.$refs.workTimePopup.open();
                return;
            }

            uni.showModal({
                title: '提示',
                content: '是否提交任务?',
                success: async (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '提交中',
                            mask: true,
                        });
                        let localInfo = await this.getLocalInfo();
                        uni.hideLoading();
                        if (!localInfo.latitude) {
                            uni.showModal({
                                title: '提示',
                                content: '请打开定位，再提交',
                                showCancel: false,
                            });
                            return;
                        }

                        let address = await getlocalinfo(
                            localInfo.latitude,
                            localInfo.longitude
                        );
                        // 计算是否范围内打卡 

                        finishPlan({
                            id: this.planId,
                            commitAddress: address.result.address,
                            commitLongitude: localInfo.longitude,
                            commitLatitude: localInfo.latitude,
                        }).then(() => {
                            uni.hideLoading();
                            uni.showToast({
                                title: '提交成功',
                            });
                            uni.navigateBack();
                        }).catch(() => {
                            uni.hideLoading();
                        });
                    }
                },
            });
        },

        // 预览
        toPreView(photo) {
            console.log('photo', photo);
            this.$previewMedia({
                sources: [photo.url],
                current: 0,
                appeal: true
            });
        },
        getList() {
            getAIImages({
                planId: this.planId,
                resultStr: 2
            }).then(res => {
                this.list = this.getDataTree(res.data || []);
            });
        },
        getDataTree(data) {
            let planTypeStatus = 1;
            if (data && data.length) {
                planTypeStatus = data[0].planTypeStatus;
            }
            let types = {};
            const names = {
                0: '其他',
                1: (planTypeStatus == 2 ? '维修' : '保养') + '签到拍照',
                2: (planTypeStatus == 2 ? '维修' : '保养') + '签退拍照',
                3: '工作项内容'
            };
            this.total = data.length;
            let appealNum = 0;
            for (let i = 0; i < data.length; i++) {
                if (data[i].imgFrom == 1 || data[i].imgFrom == 2) {
                    // 签到签退归一组
                    if (types[data[i].imgFrom || 0]) {
                        types[data[i].imgFrom || 0].push(data[i]);
                    } else {
                        types[data[i].imgFrom || 0] = [data[i]];
                    }
                } else {
                    // 工作项按模板归一组
                    if (types[data[i].locationTypeName || '其他']) {
                        types[data[i].locationTypeName || '其他'].push(data[i]);
                    } else {
                        types[data[i].locationTypeName || '其他'] = [data[i]];
                    }
                }

                if (data[i].desc || data[i].status > 1) {
                    appealNum++;
                }
            }
            this.appealNum = appealNum;
            let arrMap = {};
            for (const key in types) {
                if (key == 1 || key == 2) {
                    // 签到签退
                    if (arrMap[1]) {
                        arrMap[1].children.push({
                            name: names[key],
                            children: types[key]
                        });
                    } else {
                        arrMap[1] = {
                            type: key,
                            name: '任务跟踪',
                            children: [{
                                name: names[key],
                                children: types[key]
                            }]
                        };
                    }
                } else {
                    let childs = {};
                    for (let j = 0; j < types[key].length; j++) {
                        if (childs[types[key][j].templateContentName || '其他']) {
                            childs[types[key][j].templateContentName || '其他'].push(types[key][j]);
                        } else {
                            childs[types[key][j].templateContentName || '其他'] = [types[key][j]];
                        }
                    }
                    let children = [];
                    for (const k in childs) {
                        children.push({
                            name: k,
                            children: childs[k]
                        });
                    }
                    arrMap[key] = {
                        type: key,
                        name: key,
                        children: children
                    };
                }
            }

            let arr = [];
            for (const key in arrMap) {
                arr.push(arrMap[key]);
            }
            return arr;
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    width: 750rpx;
    background-color: #F3F6F8;
    padding-bottom: 120rpx;
    min-height: 100vh;
}

.header {
    width: calc(100% - 80rpx);
    margin-bottom: 20rpx;
    background-color: #fff;
    color: #333;
    line-height: 40rpx;
    position: relative;
    font-size: 28rpx;
    padding: 20rpx;
    padding-left: 60rpx;

    &-ico {
        width: 28rpx;
        height: 28rpx;
        position: absolute;
        left: 20rpx;
        top: 24rpx;
    }

    .lt {
        color: #f5222d;
    }

}

.appeal-title {
    margin: 20rpx 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;

    &-txt {
        font-size: 28rpx;
        font-weight: bold;
    }

    &-total {
        color: #666;
    }
}

.section {
    margin-top: 20rpx;
    margin: 0 20rpx;
    width: calc(100% - 40rpx);

    .section-title {
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
        border-left: 4rpx solid #333;
        padding-left: 10rpx;
        line-height: 24rpx;
        margin-bottom: 20rpx;
    }
}

.section:last-child {}

.sub-section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .sub-title {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
    }
}

.photo-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    padding: 20rpx 0;
    border-bottom: 1px solid #F3F6F8;
    position: relative;

    .photo {
        width: 150rpx;
        height: 150rpx;
        margin-right: 10rpx;
    }

    .status {
        font-size: 18rpx;
        padding: 0rpx 8rpx;
        border-radius: 8rpx;
        flex: 1;
        width: 80%;

        .tag {

            font-size: 24rpx;
            color: #999999;
            border: 1px solid #999999;
            padding: 2rpx 10rpx;
            border-radius: 8rpx;
            padding-top: 1rpx;

        }

        .not-compliant {
            color: #999999;
            border-color: #999999;
        }

        .compliant {
            color: #1890ff;
            border-color: #1890ff;
        }
    }

    .appeal-btn {
        font-size: 28rpx;
        color: #1890ff;
    }

    .ai-result {
        position: absolute;
        bottom: 20rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 24rpx;
        padding: 2rpx 12rpx 6rpx 12rpx;
        vertical-align: unset;
        font-weight: normal;

        &-ico {
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
        }

        .appeal {
            background-color: #fff;
            border-radius: 2rem;
            padding: 0 10rpx;
            margin-left: 4rpx;
            color: #E02020;
            margin-top: 4rpx;
            font-size: 24rpx;
        }
    }

    .gre {
        background-color: #68CA00;
    }

    .org {
        background-color: #FF7505;
    }

    .red {
        background-color: #E02020;
    }
}

.photo-item:last-child {
    border: none;
}

.submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    background-color: #fff;
    display: flex;
    padding-bottom: 20rpx;

    &-item {
        border-radius: 8rpx;
        height: 70rpx;
        background-color: #1890ff;
        color: #fff;
        width: calc(100% - 40rpx);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.multiUser {
    background: #FFFFFF;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1181);

    .multiUser_title {
        padding: 20rpx 48rpx;
        padding-bottom: 16rpx;

        .line {
            width: 64rpx;
            height: 10rpx;
            background: #D8D8D8;
            border-radius: 5rpx;
            margin: auto;
        }

        .tips {
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
        }
    }

    .multiUser_content {
        padding: 20rpx 48rpx;

        .content_tips {
            color: #333333;
            font-size: 32rpx;
            font-weight: 500;
        }

        .content_remarks {
            color: #666666;
            font-size: 24rpx;
            margin: 8rpx 0 24rpx;
        }

        .people_box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .people {
                background: #B9B9B9;
                width: 112rpx;
                height: 112rpx;
                border-radius: 50%;
                color: #fff;
                line-height: 112rpx;
                text-align: center;
                margin-top: 20rpx;
                margin-right: 24rpx;
                position: relative;

                .tags {
                    width: 100rpx;
                    height: 32rpx;
                    box-sizing: border-box;
                    background: #FDF1E9;
                    padding: 0px 8rpx;
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                    left: 6rpx;
                    z-index: 1;
                    font-size: 24rpx;
                    line-height: 32rpx;
                    color: #FA6400;
                    border-radius: 4rpx;
                }

                .signOn {
                    background: #DCF0FF;
                    color: #0091FF;
                }
            }

            .signOnPeople {
                background: #0091FF;
            }
        }
    }

    .multiUser_bottom {
        padding: 16rpx 40rpx 24rpx 40rpx;

        .btn {
            height: 68rpx;
            background: #0091FF;
            border-radius: 8rpx;
            color: #FFFFFF;
            font-weight: 500;
            line-height: 68rpx;
            font-size: 28rpx;
            text-align: center;
        }
    }
}
</style>
